<template>
	<view>
		<view>
			<u-navbar :title="type" @rightClick="rightClick" :autoBack="true">
			</u-navbar>

			<view class="head-1">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="1"></u-col>
					<u-col span="8">
						<!-- 搜索 -->
						<u-search class="head-1-1" shape="round" :showAction="false" search-icon-color="blue"
							placeholder="输入要搜索的内容" v-model="params.shopName" @clickIcon="getList"></u-search>
					</u-col>
				</u-row>

				<!-- 历史记录 -->

				<u-row customStyle="margin-bottom: 10px;color:white">
					<div style="margin-left: 100rpx;">
						<text>历史记录：</text>
						<div style="display: flex;margin-right: 10rpx;flex-wrap:wrap">
							<view v-for="(item,index) in lsjl" v-bind:key="index" style="color:darkmagenta">
								<view @click="getList(item)" style="margin-right: 40rpx;">{{item}}</view>
							</view>
						</div>
					</div>

				</u-row>
			</view>

			<!-- 列表 -->
			<view class="list_con">
				<u-grid col="1" :border="false" class="list">
					<u-grid-item v-for="(item,index) in list" :key="index" bg-color="#ffffff"
						@click="detail(item.shopId)">
						<view class="list-1">
							<view style="font-size: 40rpx;">{{item.shopName}}</view>
							<view style="color: blue;">{{item.long?item.long:"?"}}m</view>
						</view>
						<view class="list-2">
							<u-rate :value="item.star" readonly size="12"></u-rate>{{item.star<5?item.star:5}}分
							<text class="up_left"> 销量：{{item.sales}}</text>
						</view>
						<view class="list-3">
							<image :src="item.shopLicence"></image>
							<view class="list-3-1">
								<view>营业时间：{{item.week}}</view>
								<view>{{item.date}}</view>
								<view>地址：{{item.shopArea+item.shopAddress}}</view>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>

		</view>



	</view>
</template>s

<script>
	export default {
		data() {
			return {
				params: {
					shopName: '',
					pageNum: 1,
					pageSize: 4
				},
				total: 10,
				type: '汽车维修',
				content: '',
				lsjl: [],
				indexList: [],
				list: []
			}
		},
		onLoad(e) {
			console.log(e);
			if (e == null) {
				return
			}
			e = JSON.parse(e.form)
			if (e.id != null) {
				this.id = e.id
			}
			if (e.type != null) {
				this.type = e.type
			}
			// 获取历史记录
			this.lsjl = uni.getStorageSync("lsjl")

			console.log(this.lsjl)

			this.getList()
		},
		onReachBottom() {
			console.log("onReachBottom:触底方法");
			// 在这里加载更多数据
			this.addList()

		},
		
		onPullDownRefresh() {
			this.list = []; // 清空列表
			this.params = {
					shopName: '',
					pageNum: 1,
					pageSize: 4
				},
			this.getShopList(); // 获取数据
			setTimeout(() => {
				uni.stopPullDownRefresh(); // 停止下拉刷新
			}, 1000);
		},
		
		methods: {
			detail(val) {
				let form = {}
				form.id = val
				form.type = this.type
				uni.navigateTo({
					url: `/pages/yunRang/carMaintainReservation/cmr_clean/cmr_clean?form=${JSON.stringify(form)}`,
				})
			},

			getList(e) {
				this.params.pageNum = 1
				this.list = []
				if (e == null && this.params.shopName != null && this.params.shopName != '') {
					// 添加历史记录
					let l = new Array().concat(this.lsjl)
					if (!l.includes(this.params.shopName)) {
						l.push(this.params.shopName)
						uni.setStorageSync("lsjl", l)
					}
				}
				if (e != null) {
					console.log(e)
					this.params.shopName = e
				}
				// 获取商店信息列表
				this.getShopList()
				// 获取历史记录
				this.lsjl = uni.getStorageSync("lsjl")
				console.log("历史记录:")
				console.log(this.lsjl)
			},

			getShopList() {
				console.log("获取商店信息列表")
				let that = this
				this.$http({
					url: '/api/shop/shop/list',
					method: 'GET',
					data: that.params,
					success(res) {
						console.log(res.data)
						if (res.data.code == 200) {
							that.list = [...that.list, ...res.data.rows]
							that.total = res.data.total
						}
					}
				})
			},

			// 添加门店列表
			addList() {
				if (this.params.pageNum*this.params.pageSize >= this.total) {
					uni.showToast({
						title: '已经到底了！'
					})
				} else {
					this.params.pageNum += 1
					this.getShopList()
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.flex-r {
		display: flex;
		// margin-right: 10rpx;
	}

	.up_right {
		margin-right: 20rpx;
	}

	.up_left {
		margin-left: 20rpx;
	}

	.head-1 {
		background-image: url(/static/hBg.png);

		width: 100%;
		height: 300rpx;

		padding-top: 20rpx;

		margin-top: 100rpx;

	}

	.head-1-1 {
		margin-top: 20rpx;

		width: 600rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}



	.list_con {
		display: flex;
		justify-content: center;
		margin-top: -30rpx;
	}

	.list {
		margin-top: -30rpx;

		width: 650rpx;

	}

	.u-grid-item {

		padding: 20rpx 30rpx;
		margin-top: 10rpx;

		text-align: start;

		border-radius: 10rpx;
	}

	.list-1 {
		width: 500rpx;
		display: flex;

		justify-content: space-between;
		vertical-align: middle;
	}

	.list-2 {
		width: 100%;
		display: flex;
	}

	.list-3 {
		width: 600rpx;
		display: flex;
		justify-content: space-around;

		align-items: center;
	}

	.list-3 image {
		width: 200rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.list-3-1 {
		font-size: 20rpx;
		width: 300rpx;
		overflow: hidden;
		
	}
</style>